import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity,
	PixelRatio, TextInput
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
const scale = GLOBAL.SCALE;
export class SelectComponent extends Component {
	constructor(props) {
		super(props);
		console.log(this.props)
	}

	_callBack() {
		this.props.callBack && this.props.callBack();
	}
	render() {
		let { name, value, callBack, onoff, type, icon } = this.props;
		return (
			<View style={styles.listItem}>
				<Text style={styles.listText}>{name}</Text>
				<TouchableOpacity style={[styles.listNr, onoff ? styles.listNrActive : null]} onPress={() => { this._callBack(); }} >
					{
						type != 'input' ? (<Text style={styles.listTitle}>{value}</Text>) : (
							<View style={styles.inputBox}>
								<Text style={styles.listTitle}>{icon}</Text>
								<TextInput
									ref="accountInput"
									style={styles.listInput}
									underlineColorAndroid='transparent'
									placeholderTextColor="#BFBFBF"
									maxLength={30}
									value={value}
									onChangeText={(text) => {
										const newText = text.replace(/[^\d]+/, '');
										this.setState({ inputValue: newText })
									}}
								/>
							</View>
						)
					}
					{onoff || type == 'input' ? null : <Image style={styles.arrowLeft} source={require('../../../imgs/arrow-left.png')} />}
				</TouchableOpacity>
			</View >
		)
	}
}
const styles = StyleSheet.create({
	listText: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		height: 17 * scale,
		lineHeight: 17 * scale,
		marginTop: 17 * scale
	},
	listNr: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		height: 40 * scale,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.gray,
	},
	listNrActive: {
		borderBottomWidth: 0,
	},
	arrowLeft: {
		width: 6 * scale,
		height: 11 * scale
	},
	listTitle: {
		fontSize: 13 * scale,
		color: style.color.dark,
		marginRight: 3 * scale
	},
	listInput: {
		width: '80%',
		color: style.color.dark,
		paddingLeft: 0
	},
	inputBox: {
		flexDirection: 'row',
		alignItems: 'center',
	}
})